<template>
  <div
    class="contextmenuContainer listBox"
    v-if="isShow"
    :style="{ left: left + 'px', top: top + 'px' }"
  >
    <template v-if="type === 'node'">
      <div
        class="item"
        @click="exec('INSERT_NODE', insertNodeBtnDisabled)"
        :class="{ disabled: insertNodeBtnDisabled }"
      >
        <span class="name">{{$t('message.xmindMap.insertPeerNodes')}}</span>
        <span class="desc">Enter</span>
      </div>
      <div class="item" @click="exec('INSERT_CHILD_NODE')">
        <span class="name">{{$t('message.xmindMap.insertChildNode')}}</span>
        <span class="desc">Tab</span>
      </div>
      <div class="item" @click="exec('INSERT_PARENT_NODE')"  :class="{ disabled: insertNodeBtnDisabled }">
        <span class="name">{{$t('message.xmindMap.insertParentNode')}}</span>
        <span class="desc">Tab</span>
      </div>
      <div class="item" @click="exec('ADD_GENERALIZATION')" :class="{ disabled: insertNodeBtnDisabled }">
        <span class="name">{{$t('message.xmindMap.insertSummary')}}</span>
        <span class="desc">Ctrl + S</span>
      </div>
      <div
        class="item"
        @click="exec('UP_NODE')"
        :class="{ disabled: upNodeBtnDisabled }"
      >
        <span class="name">{{$t('message.xmindMap.moveNodeUp')}}</span>
        <span class="desc">Ctrl + ↑</span>
      </div>
      <div
        class="item"
        @click="exec('DOWN_NODE')"
        :class="{ disabled: downNodeBtnDisabled }"
      >
        <span>{{$t('message.xmindMap.moveNodeDown')}}</span>
        <span class="desc">Ctrl + ↓</span>
      </div>
      <div class="item danger" @click="exec('REMOVE_NODE')">
        <span>{{$t('message.xmindMap.deleteNode')}}</span>
        <span class="desc">Delete</span>
      </div>
      <div class="item danger" @click="exec('REMOVE_CURRENT_NODE')" >
        <span class="name" :title="$t('message.xmindMap.dlelteOnlyNode')">{{$t('message.xmindMap.dlelteOnlyNode')}}</span>
        <span class="desc" title="Shift + Backspace">Shift + Backspace</span>
      </div>
      <div class="item" @click="exec('COPY_NODE')">
        <span class="name">{{$t('message.xmindMap.copyNode')}}</span>
        <span class="desc">Ctrl + C</span>
      </div>
      <div class="item" @click="exec('CUT_NODE')">
        <span class="name">{{$t('message.xmindMap.cutNode')}}</span>
        <span class="desc">Ctrl + X</span>
      </div>
      <div
        class="item"
        :class="{ disabled: copyData === null }"
        @click="exec('PASTE_NODE')"
      >
        <span class="name">{{$t('message.xmindMap.pasteNode')}}</span>
        <span class="desc">Ctrl + V</span>
      </div>
    </template>
    <template v-if="type === 'svg'">
      <div class="item" @click="exec('RETURN_CENTER')">
        <span class="name">{{$t('message.xmindMap.returnRoot')}}</span>
        <span class="desc">Ctrl + Enter</span>
      </div>
      <!-- <div class="item" @click="exec('RETURN_CENTER')">回到中心</div> -->
      <div class="item" @click="exec('EXPAND_ALL')">
        <span>{{$t('message.xmindMap.expandAll')}}</span>
      </div>
      <div class="item" @click="exec('UNEXPAND_ALL')">
        <span>{{$t('message.xmindMap.putAwayAll')}}</span>
      </div>
      <div class="item">
        <span>{{$t('message.xmindMap.expandTo')}}</span>
        <div class="subItems listBox">
          <div class="item" v-for="(item, index) in expandList" :key="item" @click="exec('UNEXPAND_TO_LEVEL', false, index + 1)">{{item}}</div>
        </div>
      </div>
      <div class="item" @click="exec('RESET_LAYOUT')">
        <span>{{$t('message.xmindMap.oneClickLayout')}}</span>
        <span class="desc">Ctrl + L</span>
      </div>
      <div class="item" @click="exec('FIT_CANVAS')">
        <span>{{$t('message.xmindMap.adaptCanvas')}}</span>
        <span class="desc">Ctrl + i</span>
      </div>
    </template>
    <div class="item" @click="exec('REMOVE_ALL_NODE_CUSTOM_STYLES')">
      <span class="name">{{$t('message.xmindMap.oneClickRemoveStyles')}}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance,
  computed,
  onBeforeUnmount
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  mindMap: {
    type: Object,
  }
})

const isShow = ref(false)
const left = ref(0)
const top = ref(0)
const node = ref(null)
const copyData = ref(null)
const type = ref("")
const isMousedown = ref(false)
const mosuedownX= ref(0)
const mosuedownY  = ref(0)
const expandList = ref([$t('message.xmindMap.firstTheme'), $t('message.xmindMap.secondTheme'), $t('message.xmindMap.thirdTheme'), $t('message.xmindMap.fourthTheme'), $t('message.xmindMap.fifthTheme'), $t('message.xmindMap.sixthTheme')])

const insertNodeBtnDisabled = computed(()=>{
  return !node.value|| node.value.isRoot;
})
const upNodeBtnDisabled = computed(()=>{
  if (!node.value|| node.value.isRoot) {
    return true;
  }
  let isFirst =
    node.value.parent.children.findIndex((item) => {
      return item === node.value;
    }) === 0;
  return isFirst;
})
const downNodeBtnDisabled = computed(()=>{
  if (!node.value|| node.value.isRoot) {
    return true;
  }
  let children = node.value.parent.children;
  let isLast =
    children.findIndex((item) => {
      return item === node.value;
    }) ===
    children.length - 1;
  return isLast;
})

onMounted(()=>{
 proxy.$eventBus.$on("node_contextmenu", show);
 proxy.$eventBus.$on("node_click", hide);
 proxy.$eventBus.$on("draw_click", hide);
 proxy.$eventBus.$on("expand_btn_click", hide);
 proxy.$eventBus.$on("svg_mousedown", onMousedown);
 proxy.$eventBus.$on("mouseup", onMouseup);
  // 注册快捷键
  props.mindMap.keyCommand.addShortcut('Control+c', copy);
  props.mindMap.keyCommand.addShortcut('Control+v', paste);
  props.mindMap.keyCommand.addShortcut('Control+x', cut);
})

onBeforeUnmount(()=>{
 proxy.$eventBus.$off("node_contextmenu", show);
 proxy.$eventBus.$off("node_click", hide);
 proxy.$eventBus.$off("draw_click", hide);
 proxy.$eventBus.$off("expand_btn_click", hide);
 proxy.$eventBus.$on("svg_mousedown", onMousedown);
 proxy.$eventBus.$on("mouseup", onMouseup);
  // 移除快捷键
  props.mindMap.keyCommand.removeShortcut('Control+c', copy);
  props.mindMap.keyCommand.removeShortcut('Control+v', paste);
  props.mindMap.keyCommand.removeShortcut('Control+x', cut);
})

function show(e, node) {
  type.value = "node";
  left.value = e.clientX + 10;
  top.value = e.clientY + 10;
  isShow.value = true;
  node.value= node;
}
function onMousedown(e) {
  if (e.which !== 3) {
    return;
  }
  mosuedownX.value = e.clientX
  mosuedownY.value = e.clientY
  isMousedown.value = true;
}
function onMouseup(e) {
  if (!isMousedown.value) {
    return;
  }
  isMousedown.value = false
  if (Math.abs(mosuedownX.value - e.clientX) > 3 || Math.abs(mosuedownY.value - e.clientY) > 3) {
    hide()
    return;
  }
  show2(e)
}
function show2(e) {
  type.value = "svg";
  left.value = e.clientX + 10;
  top.value = e.clientY + 10;
  isShow.value = true;
}
function hide() {
  isShow.value = false;
  left.value = 0;
  top.value = 0;
  type.value = "";
}
function exec(key, disabled, ...args) {
  if (disabled) {
    return;
  }
  switch (key) {
    case "COPY_NODE":
      copyData.value = props.mindMap.renderer.copyNode();
      break;
    case "CUT_NODE":
     proxy.$eventBus.$emit("execCommand", key, (copyData) => {
        copyData.value = copyData;
      });
      break;
    case "PASTE_NODE":
     proxy.$eventBus.$emit("execCommand", key, copyData.value);
      break;
    case "RETURN_CENTER":
      props.mindMap.view.reset();
      break;
    default:
     proxy.$eventBus.$emit("execCommand", key, ...args);
      break;
  }
  hide();
}
function copy() {
  exec("COPY_NODE");
}
function paste() {
  exec("PASTE_NODE");
}
function cut() {
  exec("CUT_NODE");
}
</script>
<style lang="scss" scoped>
.listBox {
  width: 200px;
  background: #fff;
  box-shadow: 0 4px 12px 0 hsla(0, 0%, 69%, 0.5);
  border-radius: 4px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.contextmenuContainer {
  position: fixed;
  font-size: 14px;
  @include fontFamily;
  font-weight: 400;
  color: #1a1a1a;

  .item {
    position: relative;
    height: 28px;
    line-height: 28px;
    padding: 0 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;

    &.danger {
      color: #f56c6c;
    }

    &:hover {
      background: #f5f5f5;

      .subItems {
        visibility: visible;
      }
    }

    &.disabled {
      color: grey;
      cursor: not-allowed;
      pointer-events: none;
      .name {
        color: grey;
      }
      .desc {
        color: grey;
      }
      &:hover {
        background: #fff;
      }
    }
    .name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #1a1a1a;
    }
    .desc {
      color: #999;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #1a1a1a;
    }

    .subItems {
      position: absolute;
      left: 100%;
      top: 0;
      visibility: hidden;
    }
  }
}
</style>